<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo1</title>
    <!-- 导入echarts核心库 -->
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
    <script src="../assets/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- 创建报表显示区域 -->
<div id="main" style="width: 600px;height:400px;"></div>

<!-- JS动态渲染报表 -->
<script type="text/javascript">


    $(function () {
        //1.创建报表对象
        $.post("/echarts/emp/getMap", {}, function (map) {
            var myChart = echarts.init(document.getElementById('main'));
            //2.准备报表样式和数据
           option = {
                title: {
                    text: '部门人数示例'
                },
                tooltip: {},
                legend: {
                    data: ['部门']
                },
                xAxis: {
                    data: map.deptName
                },
                yAxis: {},
                series: [{
                    name: '部门',
                    type: 'bar',
                    data: map.deptNum
                }]
            };
            //3.绑定数据并且渲染
            myChart.setOption(option);
        });


    });
</script>
</body>
</html>
